<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>注册页面</title>
    <style>
        * { margin: 0; padding: 0; }
        html { height: 100%; }
        body { height: 100%; background: #fff url(images/backgroud.png) 50% 50% no-repeat; background-size: cover;}
        .dowebok { position: absolute; left: 50%; top: 50%; width: 430px; height: auto; margin: -300px 0 0 -215px; border: 1px solid #fff; border-radius: 20px; overflow: hidden;}
        .logo { width: 104px; height: 104px; margin: 50px auto 80px; background: url(images/login.png) 0 0 no-repeat; }
        .form-item { position: relative; width: 360px; margin: 0 auto; padding-bottom: 30px;}
        .form-item input { width: 288px; height: 48px; padding-left: 70px; border: 1px solid #fff; border-radius: 25px; font-size: 18px; color: #fff; background-color: transparent; outline: none;}
        .form-item button { width: 360px; height: 50px; border: 0; border-radius: 25px; font-size: 18px; color: #1f6f4a; outline: none; cursor: pointer; background-color: #fff; }
        #username { background: url(images/emil.png) 20px 14px no-repeat; }
        #password { background: url(images/password.png) 23px 11px no-repeat; }
        #names 	  { background:url(images/names1.png) 23px 11px no-repeat;background-size:8%; }
        #yanzheng {background: url(images/验证码.png) 20px 14px no-repeat;background-position-y:8px;}
        .tip { display: none; position: absolute; left: 20px; top: 52px; font-size: 14px; color: #f50; }
        .reg-bar { width: 360px; margin: 20px auto 0; font-size: 14px; overflow: hidden;}
        .reg-bar a { color: #fff; text-decoration: none; }
        .reg-bar a:hover { text-decoration: underline; }
        .reg-bar .reg { float: left; }
        .reg-bar .forget { float: right; }
        .dowebok ::-webkit-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok ::-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok ::-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok :-ms-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
		#yanzheng_box{display: none;}
		.back{text-decoration: none;margin-bottom: 10px;float: right;font-size: 18px;margin-right: 20px;
				line-height: 50px;height: 50px;background-image: url(images/back.png);background-repeat: no-repeat;
				width: 185px;text-align:right;background-position-y:7px;}
		.back a{text-decoration: none;color: white;}
		
        @media screen and (max-width: 500px) {
            * { box-sizing: border-box; }
            .dowebok { position: static; width: auto; height: auto; margin: 0 30px; border: 0; border-radius: 0; }
            .logo { margin: 50px auto; }
            .form-item { width: auto; }
            .form-item input, .form-item button, .reg-bar { width: 100%; }
        }
    </style>
</head>
<body>
    <div class="dowebok">
    	<div style="text-align: center;line-height: 50px;
    		font-size: 32px;height: 50px;color: white;margin-top: 30px;">欢迎注册</div>
    	<form id="regin_form" style="margin-top: 20px;">
        <div class="form-item">
            <input id="username" type="text" name="email" autocomplete="off" placeholder="邮箱">
            <p class="tip" id="tip1">请输入合法的邮箱地址</p>
        </div>
        <div class="form-item">
            <input id="password" type="password" name="password" autocomplete="off" placeholder="登录密码">
            <p class="tip" id="tip2">密码格式不正确</p>
        </div>
        <div class="form-item">
            <input id="names" type="text" name="names" autocomplete="off" placeholder="昵称">
            <p class="tip" id="tip3">不能使用特殊字符</p>
        </div>
        </form>
        <div class="form-item"><button id="regin">获取验证码</button></div>
        <div id="yanzheng_box">
        	<div class="form-item">
            <input id="yanzheng" type="text" name="names" autocomplete="off" placeholder="验证码">
            <p class="tip" id="tip4">验证码只能是六位数字</p>
        </div>
        <div class="form-item"><button type="button" id="yes">注册</button></div>
        </div>
         <div class="back" ><a href="login.html">点此返回登录页面</a></div>
    </div>
    <script src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript" src="layer/layer.js"></script>   
    <script>
        $(function () {
        	$("#username").blur(function(){
				var email_t=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        		if(!email_t.test($("#username").val())){
        			$("#tip1").show();
        			return false;
			}else{
				$("#tip1").css("display","none");
				return true;
			}});
        	$("#password").blur(function() {
        		var pwd=/^[A-Za-z]+[0-9]+[A-Za-z0-9]*|[0-9]+[A-Za-z]+[A-Za-z0-9]*$/;
        		if(!pwd.test($("#password").val())){
        			$("#tip2").show();
        			return false;
        		}else{
        			$("#tip2").css("display","none");
    				return true;
        		}
			});
        	$("#regin").click(function() {
        		$("#regin").attr("disabled", true); 
        		 $("#regin").html("60秒后重新获取邮箱验证码");
        		  var timeSec = 59;
        		  var timeStr = '';
        		  var codeTime = setInterval(function Internal(){
        		    if (timeSec == 0){
        		      $("#regin").html("获取邮箱注册码");
        		      $("#regin").removeAttr("disabled","disabled");
        		      clearInterval(codeTime);
        		      return;
        		    }
        		    timeStr = "("+timeSec+")获取邮箱注册码";
        		    $("#regin").html(timeStr);
        		    timeSec--;
        		  },1000);
        		var index = layer.load(1, {
        			  shade: [0.1,'#fff'] //0.1透明度的白色背景
        			});
        		var email_t=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        		if(!email_t.test($("#username").val())){
        			$("#tip1").show();
        			return false;
        		}
        		var pwd=/^[A-Za-z]+[0-9]+[A-Za-z0-9]*|[0-9]+[A-Za-z]+[A-Za-z0-9]*$/;
        		if(!pwd.test($("#password").val())){
        			$("#tip2").show();
        			return false;
        		}
        		$.ajax({
        			url:'regin',
        			type:'post',
        			data:$("#regin_form").serialize(),
        			async:'true',
        			dataType:'json',
        			contentType:'application/x-www-form-urlencoded; charset=UTF-8',
        			success:function(data){
        				var obj=data;
        				if(obj.code==1){
        					layer.closeAll('loading');
        					layer.msg("验证码发送成功");
        				}
        				$("#yanzheng_box").show();
        				$("#yes").click(function() {
        					var yanzhengma=/^\d{6}$/;
        					if(!yanzhengma.test($("#yanzheng").val())){
        						$("#tip4").show();
        						return false;
        					}
        					if($("#yanzheng").val()==obj.value){
        						layer.msg("验证码正确");
        						
        						$.ajax({
        		        			url:'reginto',
        		        			type:'post',
        		        			data:$("#regin_form").serialize(),
        		        			async:'true',
        		        			dataType:'json',
        		        			contentType:'application/x-www-form-urlencoded; charset=UTF-8',
        		        			success:function(data){
        		        				var back=data;
        		        				if(back.code=="0000"){
        		        					layer.msg("注册成功，正在返回登陆页面");
        		        					window.location="login.html";
        		        				}else if (back.code=="0001") {
        		        					layer.msg("该邮箱已注册");
										}else{
											layer.msg("服务器异常");
        		        				}
        		        				
        		        			},
        		        			error:function(){
        		        				layer.msg("出问题");
        		        			}
        						});
        						
        					}else{
        						layer.msg("验证码错误");
        					}
        				})
        				
        			},
        			error:function(){
        				layer.msg("错误");
        			}
        		})
        		
        	});
        });
    </script>
</body>
</html>